Don't turn the page! Tables may sound like something used to display boring columns of
figures and statistics, but the <TABLE> tag is just about the most powerful page layout
tool in HTML. Up to now we have seen that most of the formatting of an HTML document is
governed by the browser, the user's choice of screenmode and font styles and sizes dictate
where text wraps and flows, we have only had limited control through paragraph and line
breaks. While this is the way HTML was intended to work from the start, there are ways to
control the layout of your page, to impose your own style on it while remaining within the
constraints of individual browser configurations.
A table is effectively a grid, a set of boxes arranged in rows and columns, each which can
contain the majority of HTML elements. Here is a simple example
<TABLE>
<TR><TH>Name<TH>Email<TH>Telephone
<TR><TD>Wirenet<TD>sales@wirenet.co.uk<TD>01925 496482
<TR><TD>Amiga Format<TD>amformat@futurenet.co.uk<TD>01225 442244
</TABLE>
The table is enclosed within the <TABLE> </TABLE> tags, the start of each row is defined
with <TR>. Each individual cell of the table is defined with <TD>. The table is made as
wide as is needed to include the widest row, but text within cells will be wrapped to
ensure the table is not wider than the browser window. The top row uses <TH> instead of
<TD> for each cell. <TH> is for table headers and identical to <TD> except that it is
generally rendered in a bold type with the text centred in the cell, <TD> uses the normal
body font and aligns its contents to the left of the cell by default. <TR> and <TD> are
somewhat unusual in that they do not need corresponding </TR> and </TD> tags. <TD> is
assumed closed when the next <TD> or <TR> is found, <TR> is closed at the next <TR> or
</TABLE>.
This lets us line things up in columns, but so far it doesn't appear to offer a great deal
of layout power. The importance of <TABLE> lies in the attributes available for <TABLE>,
<TR> and <TD> that alter the display of the table and its contents.
The attributes that you can use in the <TABLE> tag are:
ALIGN left, right or center, how the table should be aligned in the browser window.
It does not affect the alignment of items within the table cells. The default
is left aligned
WIDTH the width of the table, either in pixels or a a percentage of the window
width. The default is the minimum width needed to include all items without
wrapping, it will not exceed 100%. The browser will override the width figure
if it is needed to render the table correctly, if the table contains an image
wider than the window, the image will be shown in full, even if the tag says
<TABLE WIDTH="100%">
BORDER the width, in pixels, of the border drawn around the table and its cells. The
default value is 0, no border.
CELLSPACING the amount of blank space between cells.
CELLPADDING the amount of space set between the cell contents and the cell border.
BGCOLOR a background colour for all cells in the table, usage is the same as for the
<BODY> tag.
BACKGROUND use BACKGROUND=url to load an image as a background to the table. This is a
Netscape extension, not part of the official HTML specification, it may appear
differently in different browsers.
These set up some of the display attributes of the table, but the
actual table contents are handled by the <TR> and <TD> tags. <TR>
accepts the following attributes:
ALIGN left, right or center. This is different to the ALIGN attribute of table. In
this case it sets how the contents of each cell should be aligned within that
cell.
VALIGN top, middle or bottom, sets the vertical alignment of cell contents.
BGCOLOR as for table, but referring to the cells of a single row.
BACKGROUND Once again BACKGROUND is not part of the official HTML specification and may
not work as expected on all browsers.
These attributes affect all cells in a row, unless an individual cell has a different
setting within its <TD> tag. <TD> accepts all of these attributes and a couple more.
NOWRAP disables word wrapping for the text in this cell
WIDTH sets the width of a cell, either in pixels or as a
percentage of the table's width.
HEIGHT sets the height of a cell either in pixels or as a
percentage of the table's height.
COLSPAN these are used to make a cell cover more than one column
ROWSPAN or row, more on these later.
Since all cells in a column must be the same width the WIDTH attribute affects the whole
column. There can only be one WIDTH setting for a column, any subsequent ones are ignored.
Similarly, you may only have one height attribute in a row. The browser will override an
unacceptable width setting, for example setting it wider than the table (or window) will
result in a cell as wide as will fit. Trying to make the cell narrower than an image will
result in the cell being just wide enough to contain the image.
Yes, you can have images as well as text inside a table cell, you can use most HTML items
within a cell (including more tables). Let's take another look at one of the pages from
our home town web site and see how we can use tables to arrange it differently. The pubs
page previously used the ALIGN attributes of <IMG> to mix text and graphics on the page,
this is how it looks with tables.
<TABLE WIDTH="100%" CELLSPACING=5>
Start the table, make it the full width of the window and leave some space around each
cell.
<TR VALIGN=TOP><TD><H3><FONT COLOR=RED>The Red Lion</FONT></H3>
Body text..
Start the first row, align all cells at the top and put some text in the first cell. Note
the use of <FONT> and <H3> in here, you can use most HTML tags within a cell, but they
cannot spread across cells. To use the same FONT setting to several cells in a row you
would need a separate <FONT>...</FONT> for each one.
<TD WIDTH="200"><A HREF="../images/redlion.jpg"><IMG SRC="../images/redlion.gif" ALT="Red Lion" WIDTH=200 HEIGHT=125></A>
The second colum contains an image, since all the images for this column are the same
width, we can set the width in <TD> to ensure the column is exactly the right width.
</TABLE>
After a few more rows, we close the table.
Another part of this page that's crying out for a table is the row of buttons at the top
of the page. Instead of the previous approach of using a fixed spacing and hoping they
would fit the user's browser window, we can now use this:
<TABLE ALIGN=CENTER WIDTH="75%">
Here we make the table narrower than the full window, but if the window is not wide enough
to fit the table in 75% of its width, the browser will use whatever space it needs.
<TR ALIGN=CENTER>
Each image is centred within its cell. When first setting up a table, you may wish to add
a BORDER=1 so you can see exactly what is going on, removing it later if you don't want
the cell borders displayed.
<TD WIDTH="*"><A HREF="home.html"><IMG SRC="../images/home.gif" ALT="home" WIDTH=80 HEIGHT=30 BORDER=0></A>
The * value for WIDTH means an equal share of the available space. In this case we have
five buttons so each gets 20%, but if another cell had WIDTH="40%" the cells with * would
each get an equal share of the remaining 60%. You can take this a stage further and use 2*
to give one cell a double share, we'll see more of this next month with frames.
<TD WIDTH="*">...
for each of the other buttons
</TABLE>
and don't forget to close the <TABLE>.
So far, every cell in a column has been the same width, but what if you want a cell do
extend across two columns, or two rows? In figure 3, the coloured title bars are created
with:
<TR><TD COLSPAN=2 ALIGN=CENTER BGCOLOR=BLUE><FONT SIZE="+2" COLOR=WHITE><B>The Red Lion</B></FONT>
<TR VALIGN=TOP><TD>We only have...
COLSPAN=2 tells the browser to extend this cell across two columns,
since this table is only has two columns, that makes this cell cover
the full width. BGCOLOR gives the coloured background and FONT is
used to make the text white.
I said tables were a powerful page layout tool, and our final example gives a hint of
this. We move the the navigation buttons into a cell on the left of the page, with the
rest of the page, including it's tables, contained in a second cell. It works like this:
<TABLE WIDTH="100%">
<TR VALIGN=TOP><TD WIDTH="100" BGCOLOR="LIGHTBLUE"><TABLE ALIGN=CENTER>
<TR ALIGN=CENTER><TD><A HREF="home.html"><IMG SRC="../images/home.gif" ALT="home" WIDTH=80 HEIGHT=30 BORDER=0></A>
The first cell contains the navigation bar. It has a coloured background to separate it
from the rest of the page. The <TD> contains a table with the navigation buttons. Note the
use of VALIGN to keep the buttons at the top of the column.
<TD BGCOLOR="WHITE"><H2 ALIGN=CENTER>Places to drink in Penketh</H2>
The other cell contains the rest of the page.
Boxout
======
Table loading
When a browser loads a page of text, it normally begins to display it before it has
finished loading. With a table this is difficult because the browser doesn't know how wide
to render each column until it has all the table data loaded. With a large page (or slow
download) this can mean a significant delay. A solution is to make sure you always give a
width for each column, even if it's only using "*", so the browser knows the intended
width of each column before the table is loaded. This may occasionally force the browser
to redraw the table if it encounters an image wider than the allocated width, but most of
the time it will speed up page loading with no unpleasant side effects.
Figure 1: our first table
Figure 2: the pubs page, using tables to separate the text and images
Figure 3: the coloured title bars are table cells that cover the full width of the table
Figure 4: Tables withing tables. The navigation bar and main copy are each in a table cell
that contains more tables